<style lang="less">
    @import './message.less';
</style>

<template>
    <div class="message-main-con">
        <div class="message-mainlist-con">
            <div>
                <Button @click="setCurrentMesType('unread')" size="large" long type="text">
                    <transition name="mes-current-type-btn">
                        <Icon v-show="currentMessageType === 'unread'" type="checkmark"></Icon>
                    </transition>
                    <span class="mes-type-btn-text">未读消息</span>
                    <Badge class="message-count-badge-outer" class-name="message-count-badge"
                           :count="unreadCount"></Badge>
                </Button>
            </div>
            <div>
                <Button @click="setCurrentMesType('hasread')" size="large" long type="text">
                    <transition name="mes-current-type-btn">
                        <Icon v-show="currentMessageType === 'hasread'" type="checkmark"></Icon>
                    </transition>
                    <span class="mes-type-btn-text">已读消息</span>
                    <Badge class="message-count-badge-outer" class-name="message-count-badge"
                           :count="hasreadCount"></Badge>
                </Button>
            </div>
            <!--<div>-->
            <!--<Button @click="setCurrentMesType('recyclebin')" size="large" long type="text"><transition name="mes-current-type-btn"><Icon v-show="currentMessageType === 'recyclebin'" type="checkmark"></Icon></transition><span class="mes-type-btn-text">回收站</span><Badge class="message-count-badge-outer" class-name="message-count-badge" :count="recyclebinCount"></Badge></Button>-->
            <!--</div>-->
        </div>
        <div class="message-content-con">
            <transition name="view-message">
                <div v-if="showMesTitleList" class="message-title-list-con">
                    <Table ref="messageList" :columns="mesTitleColumns" :data="currentMesList"
                           :no-data-text="noDataText"></Table>
                    <br>
                    <div :style="{textAlign:'center'}">
                        <Page :total="total" :page-size="pageSize" @on-change="pageOnChange"></Page>
                    </div>
                </div>
            </transition>
            <transition name="back-message-list">
                <div v-if="!showMesTitleList" class="message-view-content-con">
                    <div class="message-content-top-bar">
                        <span class="mes-back-btn-con"><Button type="text" @click="backMesTitleList"><Icon
                                type="chevron-left"></Icon>&nbsp;&nbsp;返回</Button></span>
                        <h3 class="mes-title">{{ mes.topic }}</h3>
                    </div>
                    <p class="mes-time-con">
                        <Icon type="android-time"></Icon>&nbsp;&nbsp;{{ mes.addTime }}
                        <br>
                        <Icon type="person"></Icon>
                        发件人:&nbsp;&nbsp;{{ mes.senderName }}
                    </p>
                    <div class="message-content-body">
                        <p class="message-content">{{ mes.message }}</p>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import Vue from 'vue';

    export default {
        name: 'message',
        data () {
            const markBtn = (h, params, read) => {
                return h('Button', {
                    props: {
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            let me = this;
                            this.$Modal.confirm({
                                content: "是否设置消息为" + (me.read ? "未读" : "已读"),
                                onOk(){
                                    util.post({
                                        url: "messagesitemail/readUnRead",
                                        data: {
                                            ...params.row,
                                            read: !me.read
                                        },
                                        ajaxSuccess(response){
                                            if (me.read) { // 如果设置已读->未读,则未读数量+1,已读-1
                                                me.unreadCount++;
                                                me.hasreadCount--;
                                            } else {
                                                me.hasreadCount++;
                                                me.unreadCount--;
                                            }
                                            me.initListData(); // 重新加载数据
                                            util.commonAjaxSuccess(response); // 提示
                                        }
                                    });
                                }
                            });
                        }
                    }
                }, read ? '标为未读' : '标为已读');
            };
            return {
                showModal: false,
                queryParams: {
                    sortName: "addTime",
                    sortOrder: "desc"
                },
                read: false,
                total: 0,
                pageSize: 10,
                pageNum: 1,
                currentMesList: [],
                unreadMesList: [],
                hasreadMesList: [],
                currentMessageType: 'unread',
                showMesTitleList: true,
                unreadCount: 0,
                hasreadCount: 0,
                noDataText: '暂无未读消息',
                mes: {},
                mesTitleColumns: [
                    {
                        title: ' ',
                        key: 'topic',
                        align: 'left',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('a', {
                                on: {
                                    click: () => {
                                        this.showMesTitleList = false;
                                        this.mes = params.row;
                                    }
                                }
                            }, params.row.topic);
                        }
                    },
                    {
                        title: ' ',
                        key: 'addTime',
                        align: 'center',
                        width: 180,
                        render: (h, params) => {
                            return h('span', [
                                h('Icon', {
                                    props: {
                                        type: 'android-time',
                                        size: 12
                                    },
                                    style: {
                                        margin: '0 5px'
                                    }
                                }),
                                h('span', {
                                    props: {
                                        type: 'android-time',
                                        size: 12
                                    }
                                }, params.row.addTime)
                            ]);
                        }
                    },
                    {
                        title: ' ',
                        key: 'asread',
                        align: 'center',
                        width: 100,
                        render: (h, params) => {
                            if (this.currentMessageType === 'unread') {
                                return h('div', [
                                    markBtn(h, params, false)
                                ]);
                            } else if (this.currentMessageType === 'hasread') {
                                return h('div', [
                                    markBtn(h, params, true)
                                ]);
                            }
                        }
                    }
                ]
            };
        },
        methods: {
            backMesTitleList () {
                this.showMesTitleList = true;
            },
            setCurrentMesType (type) {
                this.pageNum = 1; // 切换已读未读从第一页开始
                this.read = type === 'hasread';
                if (this.currentMessageType !== type) {
                    this.showMesTitleList = true;
                }
                this.currentMessageType = type;
                if (type === 'unread') {
                    this.noDataText = '暂无未读消息';
                    this.currentMesList = this.unreadMesList;
                } else if (type === 'hasread') {
                    this.noDataText = '暂无已读消息';
                    this.currentMesList = this.hasreadMesList;
                }
                this.initListData({
                    read: this.read
                });
            },

            loadReadMsgCount(cnf) {
                let read = cnf.read;
                let me = this;
                util.ajax.post('messagesitemail/count', util.params({
                    read: read,
                })).then(response => {
                    let c = response.data.data || 0;
                    if (read) {
                        me.hasreadCount = c;
                    } else {
                        me.unreadCount = c;
                    }
                }, response => {
                    Vue.prototype.$Message.error({
                        content: "站内信数据加载失败",
                        duration: 3,
                        closable: true
                    });
                })
            },

            initListData(cnf) { // 发起请求加载数据
                let me = this;
                util.post({
                    url: 'messagesitemail/list',
                    params: {
                        ...me.queryParams,
                        read: me.read,
                        pageSize: me.pageSize,
                        pageNum: me.pageNum
                    },
                    ajaxSuccess(response){
                        let context = response.data;
                        let resData = context.data.total === undefined ? context.data : context.data.list; // 支持分页和不分页的
                        if (context.data.total > 0 && resData.length === 0) { // 当前页没有数据了,加载前一页的数据
                            me.pageNum--;
                            me.initListData();
                        }
                        me.total = context.data.total;
                        if (me.read) {
                            me.hasreadMesList = [];
                            me.currentMesList = me.hasreadMesList;
                        } else {
                            me.unreadMesList = [];
                            me.currentMesList = me.unreadMesList;
                        }
                        resData.forEach((value) => {
                            if (me.read) {
                                me.hasreadMesList.push(value);
                            } else {
                                me.unreadMesList.push(value);
                            }
                        });
                    }
                });
            },

            pageOnChange(v) { // 换页
                let me = this;
                me.pageNum = v; // 修改当前页数
                me.initListData(); // 重新加载数据
            }
        },
        mounted () {
            this.loadReadMsgCount({
                read: true
            });
            this.loadReadMsgCount({
                read: false
            });
            this.setCurrentMesType("unread");

        },
        watch: {}
    };
</script>

